<html>
<head><title>uuCanvas.Layer - button</title>

    <script type="text/xaml" id="xaml"><?xml version="1.0"?>
      <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script type="text/javascript" src="../uupaa-excanvas.js"></script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      h2 { font-size: 100%; color: #036; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
</head>
<body>
<script>
window.onload = function() {
  var layer1 = new uuCanvas.Layer(document.getElementById("view1"), 120, 60);
  var layer2 = new uuCanvas.Layer(document.getElementById("view2"), 120, 60);
  layer1.addCanvas("a").show();
  layer2.addCanvas("a").show();
  uuCanvas.ready(function() {
    // --- button1 ---
    var extend = { w: 120, h: 60 };
    var img = document.images[0];
    var caption = -1;
    var rgba1 = { r: 0, g: 218, b: 218, a: 1 };
    var rgba2 = { r: 218, g: 0, b: 0, a: 1 };
    var r = 12, rdelta = 1;

    layer1.metaboGlossy(0, 0, "GGRAY", extend);
    uu.bind(layer1.view, "mouseover", function(evt) { uu.stop(evt); caption = 0;  });
    uu.bind(layer1.view, "mouseout",  function(evt) { uu.stop(evt); caption = 20; });
    uu.bind(layer1.view, "mousedown", function(evt) { uu.stop(evt); caption = 40; });
    uu.bind(layer1.view, "mouseup",   function(evt) { uu.stop(evt); caption = 60; });

    setInterval(function() {
      rgba1 = uuCanvas.Color.arrange(rgba1, 1, 0, 0);
      rgba2 = uuCanvas.Color.arrange(rgba2, -1, 0, 0);
      extend = uu.mix(extend, { gcolor1: uuCanvas.Color.hex(rgba1),
                                gcolor2: uuCanvas.Color.hex(rgba2),
                                r: r });
      layer1.clear().metaboGlossy(0, 0, "", extend);
      if (caption >= 0) {
        layer1.image(img, 0, caption, 120, 20, 0, 20, 120, 20);
      }
      r += rdelta;
      if (r < 12) {
        rdelta = 1;
        r = 12;
      } else if (r > 28) {
        rdelta = -1;
        r = 28;
      }
    }, 80);

    // --- button2 ---
    var extend2 = { w: 120, h: 60 };

    layer2.metaboGlossy(0, 0, "GGRAY", extend2);

    uu.bind(layer2.view, "mouseover", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 0, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseout", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGRAY", extend2).
             image(img, 0, 20, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mousedown", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGOLD", extend2).
             image(img, 0, 40, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseup", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 60, 120, 20, 0, 20, 120, 20);
    });
    layer2.show();
  });
};
</script>
    <h1>A uuCanvas.Layer <code>gradation button</code> example</h1>
    <table>
      <tr><td><div id="view1"></div></td>
          <td><div id="view2"></div></td></tr>
    </table>
    <div>
      <pre>
&lt;div id="view1"&gt;&lt;/div&gt;
&lt;div id="view2"&gt;&lt;/div&gt;

window.onload = function() {
  var layer1 = new uuCanvas.Layer(document.getElementById("view1"), 120, 60);
  var layer2 = new uuCanvas.Layer(document.getElementById("view2"), 120, 60);
  layer1.addCanvas("a").show();
  layer2.addCanvas("a").show();
  uuCanvas.ready(function() {
    // --- button1 ---
    var extend = { w: 120, h: 60 };
    var img = document.images[0];
    var caption = -1;
    var rgba1 = { r: 0, g: 218, b: 218, a: 1 };
    var rgba2 = { r: 218, g: 0, b: 0, a: 1 };
    var r = 12, rdelta = 1;

    layer1.metaboGlossy(0, 0, "GGRAY", extend);
    uu.bind(layer1.view, "mouseover", function(evt) { uu.stop(evt); caption = 0;  });
    uu.bind(layer1.view, "mouseout",  function(evt) { uu.stop(evt); caption = 20; });
    uu.bind(layer1.view, "mousedown", function(evt) { uu.stop(evt); caption = 40; });
    uu.bind(layer1.view, "mouseup",   function(evt) { uu.stop(evt); caption = 60; });

    setInterval(function() {
      rgba1 = uuCanvas.Color.arrange(rgba1, 1, 0, 0);
      rgba2 = uuCanvas.Color.arrange(rgba2, -1, 0, 0);
      extend = uu.mix(extend, { gcolor1: uuCanvas.Color.hex(rgba1),
                                gcolor2: uuCanvas.Color.hex(rgba2),
                                r: r });
      layer1.clear().metaboGlossy(0, 0, "", extend);
      if (caption >= 0) {
        layer1.image(img, 0, caption, 120, 20, 0, 20, 120, 20);
      }
      r += rdelta;
      if (r < 12) {
        rdelta = 1;
        r = 12;
      } else if (r > 28) {
        rdelta = -1;
        r = 28;
      }
    }, 80);

    // --- button2 ---
    var extend2 = { w: 120, h: 60 };

    layer2.metaboGlossy(0, 0, "GGRAY", extend2);

    uu.bind(layer2.view, "mouseover", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 0, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseout", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGRAY", extend2).
             image(img, 0, 20, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mousedown", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GGOLD", extend2).
             image(img, 0, 40, 120, 20, 0, 20, 120, 20);
    });
    uu.bind(layer2.view, "mouseup", function(evt) {
      uu.stop(evt);
      layer2.clear().metaboGlossy(0, 0, "GSLIVER", extend2).
             image(img, 0, 60, 120, 20, 0, 20, 120, 20);
    });
    layer2.show();
  });
};
      </pre>
      <div style="float:left;">
        <h2>Source image</h2>
        <img src="images/button.png" alt="" />
      </div>
    </div>
</body>
</html>
